<script setup>

    import LeftProjectView from './components/LeftProjectView.vue'
    import LeftProportion from './components/LeftProportion.vue'

    import CenterMap from './components/CenterMap.vue'
    import CenterLive from './components/CenterLive.vue'

    import RightVideo from './components/RightVideo.vue'
    import RightOverview from './components/RightOverview.vue'
    import RightOnlineSurvey from './components/RightOnlineSurvey.vue'

    import { onMounted } from 'vue'
    import { getHomeData } from '@/api/home'

    // 首页数据加载中
    let dataLoading = $ref(true)

    // 项目区概况
    let projectViewData = $ref({})

    // 特色农产品占比
    let proportionData = $ref({})

    // 项目地区分布
    let projectArea = $ref([])

    // 项目总数
    let projectTotalCount = $ref(0)

    // 监控数据
    let liveData = $ref([])

    // 宣传视频
    let publicityVideo = $ref('')

    // 设备总览
    let facilityOverview = $ref({})

    // 各设备在线概况
    let onlineData = $ref([])

    onMounted(() => {
        init()
    })

    const init = () => {
        dataLoading = true
        getHomeData().then(res => {
            dataLoading = false
            if(res.success){
                let { fluoriteFacility, projectCount, townsList, video, zcAgrotechny, zcFacilityOnline, zcFacilityPandect, zcProjectSurvey } = res.result
                projectViewData = zcProjectSurvey
                proportionData = zcAgrotechny
                projectArea = townsList
                projectTotalCount = projectCount
                liveData = fluoriteFacility
                publicityVideo = video
                facilityOverview = zcFacilityPandect
                onlineData = zcFacilityOnline
            }
        })
    }

</script>

<template>
    <div class="screen-home-wrap center-main" v-loading="dataLoading">
        <template v-if="!dataLoading">
            <div class="screen-home-left">
    
                <!-- 项目区概况 -->
                <left-project-view :projectViewData="projectViewData"></left-project-view>
    
                <!-- 特色农产品占比 -->
                <left-proportion :proportionData="proportionData"></left-proportion>
    
            </div>
    
            <div class="screen-home-center">
                
                <!-- 皱城项目分布图 -->
                <center-map :projectArea="projectArea" :projectTotalCount="projectTotalCount"></center-map>
    
                <!-- 直播列表 -->
                <center-live :liveData="liveData"></center-live>
    
            </div>
    
            <div class="screen-home-right">
                
                <!-- 视频 -->
                <right-video :publicityVideo="publicityVideo"></right-video>
    
                <!-- 设备总览 -->
                <right-overview :facilityOverview="facilityOverview"></right-overview>
    
                <!-- 各设备在线概况 -->
                <right-online-survey :onlineData="onlineData"></right-online-survey>
    
            </div>
        </template>

    </div>
</template>

<style lang="less" scoped>
    .screen-home-wrap{
        display: flex;
        padding: 20px 40px;

        .screen-home-left, .screen-home-right{
            width: 497px;
        }

        // .screen-home-right{
            
        // }

        .screen-home-center{
            width: 816px;
            margin: 0 15px;
        }
    }
</style>